<template>
	<view class="big">
		<view class="top">
			<uni-icons type="locked-filled" size="80"></uni-icons>
			<view style="margin-top: 20rpx;">重置登录密码</view>
		</view>
		<uni-forms style="margin-top: 50rpx; width: 90%;">
			<view class="example">
				<!-- 基础表单校验 -->
				<uni-forms ref="valiForm" :rules="rules" :modelValue="valiFormData" >
					<uni-forms-item label="手机号码" label-width="90"   required name="name">
						<uni-easyinput v-model="valiFormData.name"  type="number" placeholder="请输入手机号" />
					</uni-forms-item>
					<uni-forms-item label="图片验证码" label-width="90"  required name="nam" >
						<uni-easyinput v-model="valiFormData.nam" validateTrigger="blur"  type="number" placeholder="请输入图片验证码" style="width: 80%;"/>
					    <image class="image_right" src="../../static/c1.png" mode=""></image>
					</uni-forms-item>
					<uni-forms-item label="短信验证码" label-width="90" required name="na">
						<uni-easyinput v-model="valiFormData.na" type="number" placeholder="请输入短信验证码"
							style="width:70%" />
						<button class="image_right" type="default" size="mini">获取验证码</button>
					</uni-forms-item>
					<uni-forms-item label="新密码" label-width="90" required name="password">
						<uni-easyinput v-model="valiFormData.password" maxlength="16" type="password"
							placeholder="请输入新的登录密码" />
					</uni-forms-item>
				</uni-forms>
				<button type="primary">立即重置密码</button>
				<view class="bottom">
					<text @click="fanhui">已有账号？直接登录</text>
				</view>
			</view>

		</uni-forms>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				valiFormData: {},
				rules: {
					name: {
						rules: [{
								required: true,
								errorMessage: '请输入手机号'
							},
							{
								minLength: 11,
								maxLength: 11,
								errorMessage: '请输入正确的手机号'
							}
						],
						validateTrigger:"bind"
					},
					nam: {
						rules: [{
								required: true,
								errorMessage: '请输入图片验证码'
							}
						],
						validateTrigger:"bind"
					},
					na: {
						rules: [{
								required: true,
								errorMessage: '请输入短信验证码'
							}
						],
						validateTrigger:"bind"
					},	
					password: {
						rules: [{
								required: true,
								errorMessage: '请输入密码'
							},
							{
								minLength: 6,
								maxLength: 16,
								errorMessage: '请输入正确的密码'
							}
						],
						validateTrigger:"bind"
					}
				}

			}
		},
		methods: {
			// 返回登录页
			fanhui() {
				uni.navigateTo({
					url:"../denglu/denglu"
				})
			},
			submit() {
				this.$refs.valiForm.validate().then(res => {
					console.log('表单数据信息：', res);
				}).catch(err => {
					console.log('表单错误信息：', err);
				})
			},
			binddata(name,value){
					// 通过 input 事件设置表单指定 name 的值
					  this.$refs.form.setValue(name, value)
					}
		}
	}
</script>

<style >
	page{
		background-color: #FFFFFF;
	}
	 @import "./new_file.css";
	
</style>
